<template>
  <el-pagination class="el-paging"
                 @size-change="handlePageSizeChange"
                 @current-change="handleCurrentPageChange"
                 :current-page="page.currentPage"
                 :page-sizes="[10, 20, 30, 40, 50]"
                 :page-size="page.pagesize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"
                 :background='true'
                 prev-text="上一页"
                 next-text="下一页">
  </el-pagination>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  name: "FrontPagination",
  props: {
    nvsData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const page = ref({
      currentPage: 1,
      pageSize: 10
    });

    const rowRange = computed(() => {
      const start = (page.value.currentPage - 1) * page.value.pageSize;
      return [start, start + page.value.pageSize - 1];
    });

    const total = computed(() => {
      return props.nvsData.nvs.length;
    });

    function inCurrentPage(row) {
      const start = rowRange.value[0];
      const end = rowRange.value[1];
      return row.rowIndex >= start && row.rowIndex <= end;
    }
    function tableRowClassName(row) {
      const isHide = !inCurrentPage(row);
      const result = isHide ? 'hide-row' : '';
      return result;
    }
    function handlePageSizeChange(val) {
      page.value.pageSize = val;
    }
    function handleCurrentPageChange(val) {
      page.value.currentPage = val;
    }

    return {
      page,
      total,
      tableRowClassName,
      handlePageSizeChange,
      handleCurrentPageChange
    }
  }
}
</script>

<style scoped>

</style>
